import React, { PureComponent, Fragment } from 'react';
import { formatTime } from '../../utils';
import { bigScreenData} from '../../services/index';
import {
  Decoration10,
  Decoration8,
  Decoration6,
} from '@jiaminghi/data-view-react';

import { TopBox, TimeBox } from './style';

class index extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      // title: '超能小食堂运营数据',
      timeStr: '',
      content:'',
      animatedName:'',
      weekday: [
        '星期天',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六',
      ],
    };
  }

  // 设置时间
  componentDidMount() {
    this.setTimingFn();
    this.getBigScreenData();
  }
  async getBigScreenData(){
    let res = await bigScreenData();  
    if(!res){return} 
    // this.setState({
    //   storeList : res.result
    // }) 
    console.log(res);
    if(res.result.data.length>0){
      this.setState({
        content : res.result.data[0].content,
        animatedName:'animateOpacity'
      }) 
      let i=1;
      this.speckText(res.result.data[0].content);
      setInterval(()=>{
        this.setState({
          content : res.result.data[i].content
        }) 
        this.speckText(res.result.data[i].content);
        i++;
      
        if(i>=res.result.data.length){i=0}
      },8000)
    }
  }
  speckText(str){
        var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" + encodeURI(str);        // baidu
          //url = "http://translate.google.cn/translate_tts?ie=UTF-8&tl=zh-CN&total=1&idx=0&textlen=19&prev=input&q=" + encodeURI(str); // google
        
　　         //request.url = encodeURI(url);
        // request.contentType = "audio/mp3"; // for baidu
        //request.contentType = "audio/mpeg"; // for google

    　　var n = new Audio(url);

   　　 n.src = url;

  //  　　 n.play();
    　　
   　　 // $("...").play();
    　　// var sound = new Sound(request);
    　　// sound.play();
  }
  reLoadWind=()=>{
    window.location.reload()
  }
  setTimingFn() {
    this.timing = setInterval(() => {
      let dateYear = formatTime(new Date(), 'yyyy-MM-dd');
      let dateDay = formatTime(new Date(), 'HH: mm: ss');
      let dateWeek = this.state.weekday[new Date().getDay()];
      this.setState({
        timeStr: `${dateYear} | ${dateDay} ${dateWeek}`,
      });
    }, 1000);
  }

  render() {
    const { content,animatedName } = this.state;
    return (
      <Fragment>
        <TopBox>
          <div className='top_box'>
            <div className='top_decoration10'>
              <Decoration10  />
              <div className="viewAll" onClick={this.reLoadWind}>
                <span className="iconfont icon-chushihua"></span>
              </div>
            </div> 
            <div className='title-box'> 
                <Decoration8 
                  className='top_decoration8'
                  color={['#568aea', '#000000']}
                /> 
             
              <div className='title'>
                {/* <span className='title-text'>{content}</span> */}
                <div className={`big-screen-data  ${animatedName}` } >
                  { content }
                </div>
                <Decoration6
                  className='title-bototm top_decoration6'
                  reverse
                  color={['#50e3c2', '#67a1e5']}
                />
              </div>

              <Decoration8
                reverse
                className='top_decoration8'
                color={['#568aea', '#000000']}
              />
            </div>
            <Decoration10 className='top_decoration10 top_decoration10_reverse' />
            <TimeBox>
              <h3>{this.state.timeStr}</h3>
            </TimeBox>
          </div>
        </TopBox>
      </Fragment>
    );
  }
}

export default index;
